import styled from "styled-components"
import dayjs from "dayjs"
import type { HomeViewSlice } from "../../../../type/HomeViewSlice"
import { useSelector } from "react-redux"

interface ListItemProps {
  item: ListDataItem
  btnClick: (item: ListDataItem) => void
  lookInfo: (item: ListDataItem) => void
}

interface ListDataItem {
  billNo: string
  companyName: string
  dateFrom: string
  dateTo: string
  id: string
  location: number[]
  status: number
}

// 中文环境dayji
dayjs.locale('zh-cn')

const ListItemDiv = styled.div`
  padding: 15rem 10rem;
  background: #fff;
  margin-top: 10rem;
  font-size: 16rem;
`

const Header = styled.div`
  display: flex;
  align-items: center;
  font-size: 12rem;
  justify-content: space-between;
`

const TimeFrom = styled.span`
  font-size: 14rem;
  color: #767676;
`

const Status = styled.span`
  font-size: 14rem;
  width: 50rem;
  text-align: center;
`

const Main = styled.div`
  padding: 20rem 0;
`

const Name = styled.div`
  font-size: 15rem;
  font-weight: 600;
  color: #262626;
  display: flex;
  line-height: 30rem;
`

const Info = styled.div`
  font-size: 14rem;
  color: #767676;
  line-height: 30rem;
  display: flex;
  align-items: center;
`

const Svg = styled.i`
  display: flex;
  align-items: center;
  svg {
    width: 16rem;
    height: 16rem;
    margin-right: 5rem;
  }
`

const Footer = styled.div`
  display: flex;
  align-items: center;
  font-size: 12rem;
  justify-content: space-between;
`
const Buttond = styled.div`
  padding: 2rem 10rem;
  color: #262626;
  font-size: 16rem;
  border: 1rem solid #ccc;
  border-radius: 18rem;
`

function ListItem (props: ListItemProps) {

  // #region 变量声明
  const { item, btnClick, lookInfo } = props
  const { mapData: { applicationStatus } } = useSelector((state: { homeView: HomeViewSlice }) => state.homeView)
  // #endregion

  // #region 函数
  
  // #endregion

  // #region Hooks

  // #endregion

  return (
    <ListItemDiv onClick={ () => lookInfo(item) }>
      <Header>
        <TimeFrom>申请时间: { item.dateFrom }</TimeFrom>
        { (item.status + 2) && applicationStatus && <Status style={{ color: applicationStatus[item.status + 1].color }}>{ applicationStatus[item.status + 1].label }</Status> }
      </Header>
      <Main>
        <Name>
          <Svg><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1655" width="32" height="32"><path d="M956.624449 922.846357h-29.442936V592.832598c0-17.701887-8.850944-41.545246-29.984829-50.396189l-267.334627-174.851297V93.747751l-2.890104-6.141471C614.869642 57.802081 588.316811 42.809667 555.622508 48.770506L136.376786 173.586876c-23.843359 8.850944-41.545246 32.694302-41.545246 59.427765v689.831716H64.84671c-18.243782 0-29.98483 14.992415-29.98483 29.98483 0 18.243782 12.102311 29.98483 29.98483 29.98483h891.777739c18.243782 0 29.98483-12.102311 29.98483-29.98483-0.180632-18.243782-12.282942-29.98483-29.98483-29.98483z m-89.231964-333.265126v333.265126H629.862057V435.683189l237.530428 153.898042zM153.536779 233.014641l415.994355-124.81637v814.648086H153.536779V233.014641z" p-id="1656"></path><path d="M450.856236 325.136708H272.753572c-18.243782 0-29.98483 11.741048-29.98483 29.98483 0 18.243782 12.102311 29.98483 29.98483 29.98483h178.102664c18.243782 0 29.98483-11.741048 29.984829-29.98483 0-18.424413-12.282942-29.98483-29.984829-29.98483zM450.856236 503.058741H272.753572c-18.243782 0-29.98483 12.102311-29.98483 29.984829v0.361263c0 18.243782 12.102311 29.98483 29.98483 29.98483h178.102664c18.243782 0 29.98483-12.102311 29.984829-29.98483v-0.180631-0.180632c0-18.243782-12.282942-29.98483-29.984829-29.984829zM450.856236 681.703299H272.753572c-18.243782 0-29.98483 11.741048-29.98483 29.984829v0.361263c0 18.243782 12.102311 29.98483 29.98483 29.98483h178.102664c18.243782 0 29.98483-11.741048 29.984829-29.98483v-0.180631-0.180632c0-18.243782-12.282942-29.98483-29.984829-29.984829zM688.747927 712.049391c0 18.243782 12.102311 29.98483 29.98483 29.98483h59.427765c18.243782 0 29.98483-11.741048 29.98483-29.98483v-0.180631-0.180632c0-18.243782-12.102311-29.98483-29.98483-29.984829h-59.427765c-18.243782 0-29.98483 11.741048-29.98483 29.984829v0.361263z" p-id="1657"></path></svg></Svg>
          { item.companyName }
        </Name>
        <Info>
          <Svg><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" width="32" height="32"><path d="M725.333333 170.666667h74.709334C864.853333 170.666667 917.333333 223.189333 917.333333 288.096V799.893333C917.333333 864.757333 864.832 917.333333 800.042667 917.333333H223.957333C159.146667 917.333333 106.666667 864.810667 106.666667 799.904V288.106667C106.666667 223.242667 159.168 170.666667 223.957333 170.666667H298.666667v-32a32 32 0 0 1 64 0v32h298.666666v-32a32 32 0 0 1 64 0v32z m0 64v32a32 32 0 0 1-64 0v-32H362.666667v32a32 32 0 0 1-64 0v-32h-74.709334A53.354667 53.354667 0 0 0 170.666667 288.096V799.893333A53.301333 53.301333 0 0 0 223.957333 853.333333h576.085334A53.354667 53.354667 0 0 0 853.333333 799.904V288.106667A53.301333 53.301333 0 0 0 800.042667 234.666667H725.333333z m-10.666666 224a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h405.333334zM586.666667 618.666667a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h277.333334z" fill="#000000" p-id="2711"></path></svg></Svg>
          { dayjs(item.dateFrom).format('MM-DD dd mm:ss') } ~ { dayjs(item.dateTo).format('MM-DD dd mm:ss') }
        </Info>
        <Info>
          <Svg><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3845" width="32" height="32"><path d="M503.466667 870.4l-196.266667-196.266667-4.266667-4.266666-4.266666-4.266667c-51.2-55.466667-85.333333-132.266667-85.333334-217.6C213.333333 273.066667 358.4 128 533.333333 128S853.333333 273.066667 853.333333 448c0 85.333333-34.133333 162.133333-85.333333 217.6l-204.8 204.8-29.866667 29.866667-29.866666-29.866667z m29.866666-29.866667l196.266667-196.266666c51.2-51.2 81.066667-119.466667 81.066667-196.266667C810.666667 294.4 686.933333 170.666667 533.333333 170.666667S256 294.4 256 448c0 76.8 29.866667 145.066667 76.8 192l200.533333 200.533333z m0-243.2C452.266667 597.333333 384 529.066667 384 448S452.266667 298.666667 533.333333 298.666667 682.666667 366.933333 682.666667 448 614.4 597.333333 533.333333 597.333333z m0-42.666666c59.733333 0 106.666667-46.933333 106.666667-106.666667S593.066667 341.333333 533.333333 341.333333 426.666667 388.266667 426.666667 448s46.933333 106.666667 106.666666 106.666667z" fill="#444444" p-id="3846"></path></svg></Svg>
          城市
        </Info>
      </Main>
      <Footer>
        <TimeFrom>申请单号: { item.billNo }</TimeFrom>
        <Buttond onClick={ () => btnClick(item) }>{ item.status === 0 ? '删除' : '行程单' }</Buttond>
      </Footer>
    </ListItemDiv>
  )
}

export default ListItem
